<template>
  <div class="recharge-record">
    <Card>
      <p slot="title">线下充值记录</p>
      <i-form style="text-align: right;" ref="form-validate" inline :model="formItem">
        <Form-item>
          <DatePicker v-model="formItem.startTime" type="datetime" placeholder="开始时间"></DatePicker>
        </Form-item>
        <Form-item>
          <DatePicker v-model="formItem.endTime" type="datetime" placeholder="结束时间"></DatePicker>
        </Form-item>
        <Form-item>
          <i-input v-model="formItem.order_id" clearable placeholder="交易单号"></i-input>
        </Form-item>
        <Form-item>
          <Select placeholder="状态" v-model="formItem.status" clearable >
            <Option v-for="(item,index) in option" :key="index" :value="item.value">{{ item.title }}</Option>
          </Select>
        </Form-item>
        <Form-item>
          <Button @click="search" class="com-btm">
            搜索</Button>
        </Form-item>
      </i-form>

      <div class="record">
        <Row type="flex" justify="start" class="code-row-bg">
          <record-list v-for="(item,index) in recordData" :key="index" :item="item">
          </record-list>
        </Row>
      </div>
      <i-table :columns="allColumns" :data="newData">
        <template slot-scope="{ row }" slot="actualEntry">
          {{ row.price | submoney(row.poundage) }}
        </template>
      </i-table>
      <div style="margin-top: 10px;">
        <Page size="small" :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="pagesize"
          show-total show-sizer show-elevator></Page>
      </div>
    </Card>
  </div>

</template>
<script>
import { getRecharge } from '@/api/user'
import RecordList from '@/components/record-list/record-list.vue'

const color = {
  0: {
    value: 0,
    name: '生成',
    color: 'blue'
  },
  1: {
    value: 1,
    name: '处理中',
    color: '#FFB800'
  },
  2: {
    value: 2,
    name: '充值成功',
    color: '#009688'
  },
  3: {
    value: 3,
    name: '充值失败',
    color: 'red'
  }
}
export default {
  // name: 'recharge-record',
  components: {
    RecordList
  },
  data () {
    return {
      ajaxHistoryData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      formItem: {
        uid: this.$store.state.user.userInfo.uid,
        startTime: '',
        endTime: '',
        order_id: '',
        status: ''
      },
      option: [
        {
          value: '0',
          title: '处理中'
        }, {
          value: '1',
          title: '充值成功'
        }, {
          value: '2',
          title: '充值失败'
        }],
      recordData: [{
        title: '订单数：',
        num: 1,
        color: 'blue'
      },
      {
        title: '交易金额：',
        num: 354,
        icon: '￥',
        color: 'blue'
      },
      {
        title: '已入账金额：',
        num: 18,
        color: 'green'
      }
      ],
      allColumns: [{
        title: '交易单号',

        key: 'order_id'
      },
      {
        title: '交易金额(元)',
        width: 130,
        key: 'price'
      },
      {
        title: '手续费(元)',
        width: 130,
        key: 'poundage'
      },
      {
        title: '实际入账(元)',
        width: 130,
        slot: 'actualEntry'
      }, {
        title: '状态',
        width: 110,
        key: 'status',
        align: 'center',
        render: (h, params) => {
          let status = params.row.status
          let statusColor = ' '
          let statusText = ' '
          switch (status) {
            case 0:
              statusText = '处理中'
              statusColor = 'orange'
              break
            case 2:
              statusText = '充值成功'
              statusColor = 'green'
              break
            case 3:
              statusText = '充值失败'
              statusColor = 'gray'
              break
          }
          return h('span', {
            style: {
              color: statusColor
            }
          }, statusText
          )
        }
      },
      {
        title: '创建时间/处理时间',
        minWidth: 200,
        key: 'add_time',
        render: (h, params) => {
          return h('div', [h('div', params.row.add_time), h('div', params.row.p_time)])
        }
      }

      ],

      newData: []
    }
  },

  methods: {
    getList () {
      this.formItem.pageSize = this.pageSize
      this.formItem.pageCurrent = this.pageCurrent

      getRecharge(this.formItem)
        .then(res => {
          this.newData = res.data.data
          this.dataCount = res.data.count
          this.recordData[0].num = res.data.count
          this.recordData[1].num = res.data.totalData.priceSum
          this.recordData[2].num = res.data.totalData.subMoneySum
        }).catch(err => {
          this.$Message.error(err.msg)
        })
    },
    //
    formatStatus (value, status) {
      return status[value] || {
        value: '',
        name: ''
      }
    },

    // 按条件搜索
    search () {
      this.getList()
    },

    // 点击切换页面
    changepage (index) {
      // 储存当前页
      this.page = index
      this.getList()
    },
    // 每页显示的数据条数
    pagesize (index) {
      this.pageSize = index
      this.getList()
    }
  },
  created () {
    this.getList()
  }
}
</script>
<style lang="less">
  .search-con {
    text-align: right;
    padding: 10px 0;

    .search {
      &-col {
        display: inline-block;
        width: 200px;
      }

      &-input {
        display: inline-block;
        width: 200px;
        margin-left: 10px;
      }

      &-btn {
        margin-left: 10px;
        background-color: #009688;
        color: white;
      }
    }
  }

  .recharge-record .ivu-card-head {
    position: relative;
  }

  .recharge-record .ivu-card-head::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 95px;
    border-bottom: 2px solid #5FB878;
  }
   .recharge-record .ivu-table-cell {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
</style>
